<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>这里不用剪线</title>
    <meta name="keywords" content="扫雷,小游戏">
    <meta name="description" content="本页面是扫雷小游戏">
    <div th:replace="tools/_fragments-tools::basicrefrence"></div>
</head>
<body class="unselect" id="body">

<nav th:replace="tools/_fragments-tools::head"></nav>


<div style="padding-top: 50px;padding-bottom: 50px;padding-left: 15%;padding-right: 15%;">
    <div class="ui center aligned mobile stackable segment" id="game-page">
        <div class="ui container">
            <div class="ui middle aligned center aligned mobile stackable grid">
                <div class="column">
                    <h1 class="ui teal image header">
                        <img id="startButton" src="/images/minesweeper/minesweeper_button.gif" class="image"
                             onclick="init()"
                             width="80px" height="80px"
                             draggable="false">
                    </h1>
                    <form class="ui large form" method="post" action="#">
                        <div id="mapSegment" class="ui stacked segment">

                            <div>
                                <img state="0" class="click-region" id="a00" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a01" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a02" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a03" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a04" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a05" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a06" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a07" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a08" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a10" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a11" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a12" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a13" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a14" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a15" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a16" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a17" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a18" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a20" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a21" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a22" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a23" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a24" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a25" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a26" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a27" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a28" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a30" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a31" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a32" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a33" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a34" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a35" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a36" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a37" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a38" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a40" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a41" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a42" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a43" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a44" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a45" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a46" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a47" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a48" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a50" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a51" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a52" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a53" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a54" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a55" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a56" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a57" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a58" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a60" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a61" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a62" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a63" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a64" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a65" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a66" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a67" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a68" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a70" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a71" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a72" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a73" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a74" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a75" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a76" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a77" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a78" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>
                            <div>
                                <img state="0" class="click-region" id="a80" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a81" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a82" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a83" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a84" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a85" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a86" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a87" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                                <img state="0" class="click-region" id="a88" src="/images/minesweeper/default.png" draggable="false" style='border: solid;margin-left: 2px' width="45px" height="45px">
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


<!---缓存--->


<footer th:replace="tools/_fragments-tools::foot"></footer>


<script type="text/javascript">

    $("html,body").scrollTop($("#game-page").offset().top);

    var gameButton = document.getElementById("startButton");

    document.oncontextmenu = function(e){
        return false;
    }
    const MAX_ROW = 9;
    const MAX_COL = 9;

    const COULD_OPEN = "0";
    const COULD_CLOSE = "2";
    const COULD_NOT_OPEN = "1";

    var startFlag = false;
    var minesCount = 10;
    var map = [
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
    ];
    var countMap = [
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
        [0, 0, 0, 0, 0, 0, 0, 0,0],
    ];

    function init() {
        for(let i = 0; i < MAX_ROW; i++) {
            for(let j = 0; j < MAX_ROW; j++) {
                map[i][j] = 0;
                countMap[i][j] = 0;
            }
        }
        minesCount = 10;
        startFlag = true;
        let count = 0;
        while (count < 10) {
            let x = Math.floor(Math.random() * MAX_ROW);
            let y = Math.floor(Math.random() * MAX_ROW);
            if (map[x][y] === 1 || countMap[x][y] > 3) {
                continue;
            }
            count++;
            map[x][y] = 1;
            // 计数地图
            let xAdd = x + 1 < MAX_ROW;
            let yAdd = y + 1 < MAX_COL;
            let xSub = x - 1 >= 0;
            let ySub = y - 1 >= 0;
            if (xSub) {
                if (ySub) {
                    countMap[x - 1][y - 1]++;
                }
                countMap[x - 1][y]++;
                if (yAdd) {
                    countMap[x - 1][y + 1]++;
                }
            }
            if (ySub) {
                countMap[x][y - 1]++;
            }
            if (yAdd) {
                countMap[x][y + 1]++;
            }
            if (xAdd) {
                if (ySub){
                    countMap[x + 1][y - 1]++;
                }
                countMap[x + 1][y]++;
                if (yAdd) {
                    countMap[x + 1][y + 1]++;
                }
            }
        }
        $(".click-region").attr("src","/images/minesweeper/default.png");
        $(".click-region").attr("state",COULD_OPEN);

        gameButton.src = "/images/minesweeper/minesweeper_button_start.gif";
    }

    function open(x, y) {
        let aroundCount = countMap[x][y];
        let element = document.getElementById("a" + x + y);
        if (element.getAttribute("state") === COULD_OPEN) {
            element.src = "/images/minesweeper/" + countMap[x][y] + ".png";
            element.setAttribute("state", COULD_NOT_OPEN);
            // 翻开周边
            if (aroundCount === 0) {
                let xAdd = x + 1 < MAX_ROW;
                let yAdd = y + 1 < MAX_COL;
                let xSub = x - 1 >= 0;
                let ySub = y - 1 >= 0;
                if (xSub) {
                    if (ySub) {
                        open(x - 1, y - 1);
                    }
                    open(x - 1, y);
                    if (yAdd) {
                        open(x - 1, y + 1);
                    }
                }
                if (ySub) {
                    open(x, y - 1);
                }
                if (yAdd) {
                    open(x, y + 1);
                }
                if (xAdd) {
                    if (ySub){
                        open(x + 1, y - 1);
                    }
                    open(x + 1, y);
                    if (yAdd) {
                        open(x + 1, y + 1);
                    }
                }
            }
        }
    }

    $(".click-region").on('mouseup',function (even) {
        if (!startFlag) {
            return;
        }
        let state = this.getAttribute("state");
        // 当前状态为无法再次点击
        if (state === COULD_NOT_OPEN) {
            return;
        }
        let row = this.id.slice(1,2);
        let col = this.id.slice(2);
        switch (even.which) {
            case 1:
                // 翻到雷
                if (map[row][col] === 1) {
                    for(let i = 0; i < MAX_ROW; i++) {
                        for(let j = 0; j < MAX_ROW; j++) {
                            if (map[i][j] === 1) {
                                let id = "a" + i + j;
                                let element = document.getElementById(id);
                                if (element.getAttribute("state") === COULD_CLOSE) {
                                    element.src = "/images/minesweeper/mine_found.png";
                                }else {
                                    element.src = "/images/minesweeper/mine.png";
                                }
                            }
                        }
                    }
                    startFlag = false;
                    gameButton.src="/images/minesweeper/minesweeper_button_fail.jpg";
                }else {
                    open(row[0] - '0',col[0] - '0');
                }
                break;
            case 2:
                break;
            case 3:
                // 当前状态为可以合上
                if (state === COULD_CLOSE) {
                    this.src="/images/minesweeper/default.png";
                    if (map[row][col] === 1) {
                        minesCount++;
                    }
                    this.setAttribute("state",COULD_OPEN);
                }
                // 当前状态为可以翻开
                if (state === COULD_OPEN) {
                    this.src="/images/minesweeper/flag.png";
                    if (map[row][col] === 1) {
                        minesCount--;
                    }
                    if (minesCount === 0) {
                        startFlag = false;
                        gameButton.src="/images/minesweeper/minesweeper_button_success.jpg";
                    }
                    this.setAttribute("state",COULD_CLOSE);
                }
                break;
                    default:
        }
    })




</script>

</body>
</html>